<template>
  <div>
    <el-card>
      <!-- @changeValue="onChangeValue" 同等与 inputConfig/numberConfig等...的onChange -->
      <el-form ref="tableRef" labelWidth="auto" size="small" :model="formParam">
        <v-form :form="form" :formParam="formParam">
          <!-- form -->
          <template #customize="data">
            <el-input
              v-model="formParam[data.key]"
              :placeholder="`请输入自定义`"
              size="small"
              clearable
            />
          </template>
        </v-form>
        <v-table
          style="margin: 10px 0"
          label="列表"
          :his="false"
          :keys="keys"
          :table="table"
          :apiFn="tableList"
          :formParam="formParam"
          :inputConfig="{ onChange }"
          :selectConfig="{ select: onChange }"
          :disabledConfig="{
            name: !(id == 1),
            ages: id,
          }"
          :optionConfig="{
            treeOption,
          }"
          @changeValue="onChangeValue"
        >
          <!-- 中间层：信息/按钮等 -->
          <template #info>
            <!-- 添加行 -->
            <div class="but">
              <el-button type="primary" size="small" @click="onAction(true)">
                添加
              </el-button>
            </div>
          </template>
          <!-- table -->
          <template #annex>
            <el-button type="text">附件</el-button>
          </template>
          <template #operate="{ row, index }">
            <el-popconfirm
              title="确认删除此项吗？"
              @confirm="onAction(false, index)"
            >
              <template #reference>
                <el-button type="text" style="color: #f56c6c"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </v-table>
      </el-form>
      <div class="but">
        <el-button
          style="margin: 0 8px"
          size="small"
          @click="() => $refs.tableRef.resetFields()"
        >
          清空
        </el-button>
        <el-button type="primary" size="small" @click="onSubmit">
          提交
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { form, table } from "./config/index";
import { tableList } from "@/api";
import defaultForm from "@/utils/defaultForm";

export default {
  data() {
    return {
      form,
      table,
      tableList,
      // formParam对象必须存在表单字段，否则一开始重置会导致无法输入
      formParam: defaultForm(form),
      // 赋值默认值，防止使用 resetFields 清空无法输入
      defaultValue: defaultForm(table.propList),
      // 假设这是id
      id: 1,
      keys: "tableData",
      treeOption: [
        {
          id: 1,
          label: "树1",
          children: [
            {
              id: 11,
              label: "树 1-1",
            },
          ],
        },
        {
          id: 2,
          label: "树2",
        },
      ],
    };
  },
  created() {},
  methods: {
    // 添加删除/行
    onAction(status, i) {
      if (!this.formParam[this.keys]) {
        this.formParam[this.keys] = [];
      }
      // i：删除索引
      if (status) {
        // 添加
        this.formParam[this.keys].push({ ...this.defaultValue });
        return;
      }
      this.formParam[this.keys].splice(i, 1);
    },
    onChange(data) {
      console.log(data, "onChange");
    },
    onChangeValue(data) {
      console.log(data, "onChangeValue");
      switch (data.type) {
        case "tree":
          //
          break;
        case "select":
          //
          break;
        case "date":
          //
          break;
      }
    },
    onSubmit() {
      const { tableRef } = this.$refs;
      console.log(this.formParam, "onSubmit");
      tableRef.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!", fields);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.but {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
